import React from 'react';
import { Table, Button, TablePaginationConfig } from 'antd'
import { Input } from 'antd';
import type { ColumnsType } from 'antd/es/table'
import '../../styles/Rolemanage.scss'

const { Search } = Input;
interface Props {

}

//定义每一行的数据对象类型
interface DataType {
    name: string;
    type: string;
    describe: string;
    key: string;
}

function Rolemanage(props: Props) {


    //决定了每一列渲染什么数据
    const columns: ColumnsType<DataType> = [
        {
            title: '角色名字', //表格列的名字(显示在表格头上)
            dataIndex: 'name', //数据对应的属性名
            //key: 'name' //key是必须的,每一列不同.
        },
        {
            title: '角色类型',
            dataIndex: 'type',
        },
        {
            title: '描述',
            dataIndex: 'describe',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <>
                    <button className='iconfont icon-edit'>编辑</button>
                    <button className='iconfont icon-delete' style={{ marginLeft: 20 }}>删除</button>
                </>
            ),
        },
    ];

    //决定了每一行渲染什么数据
    const data: DataType[] = [
        {
            name: '超级管理员',
            type: '超级管理员',
            describe: '包含所有客服和管理的权限，不支持修改权限',
            key: '1',
        },
        {
            name: '质检主管',
            type: '管理员',
            describe: '系统默认设置，该角色适用于给质检员分配任务的质检管理者',
            key: '2',
        },
        {
            name: '质检专员',
            type: '管理员',
            describe: '系统默认设置，该角色适用于对客服进行质检的人员',
            key: '3',
        },
        {
            name: '管理员',
            type: '管理员',
            describe: '包含除呼叫功能以外所有客服和管理权限',
            key: '3',
        },
        {
            name: '普通客服',
            type: '普通客服',
            describe: '负责一线在线咨询的接待，留言的处理(若购买工单中心，则还有工单功能)',
            key: '3',
        },
    ];

    //分页器
    var pagination = {
        current: 1,
        pageSize: 10,
        total: 100
    }


    //搜索
    const onSearch = (value: string) => {
        console.log(value)
    };

    //分页
    const handleChange = (pagination: TablePaginationConfig) => {

        //console.log(pagination);

        //pagination 参数 包含有当前最新页码

        //在这里发请求, 获取最新页码对应的数据

    }

    return (
        <div>
            <div className='rolemanage'>
                <p>角色权限管理</p>
                <div className="opet">
                    <Search style={{ width: 300, marginRight: 20 }} placeholder="输入角色名称" onSearch={onSearch} enterButton />
                    <Button type="primary">新增角色</Button>
                </div>
                {/* 表格组件 */}
                {/* columns 表格每一列如何渲染 */}
                {/* dataSource 表格的数据源 */}
                <Table columns={columns} dataSource={data} pagination={pagination} onChange={handleChange} />

            </div>
        </div>
    );
}

export default Rolemanage;